<template>
    <el-dialog v-model="dialogFormVisible" title="关联产品列表" size="1000" @close="handleClose">
        <div class="count-title">关联产品数量：{{ datas.length }}</div>
        <el-input icon="Search" placeholder="搜索产品（名称/类型）" v-model="keyword"></el-input>
        <el-table :data="filterData" max-height="500px">
            <el-table-column label="产品名称" prop="product_name"></el-table-column>
            <el-table-column label="产品类型" prop="product_type"></el-table-column>
        </el-table>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineExpose, computed } from "vue";
const dialogFormVisible = ref(false);

const prop = defineProps({
    datas: {
        type: Array,
        default: [] as any[],
    },
});
const keyword = ref("");
const filterData = computed(() => {
    return prop.datas.filter((item: any) => {
        return item.product_name.includes(keyword.value) || item.product_type.includes(keyword.value);
    });
})

const dialogOpen = (id: number) => {
    dialogFormVisible.value = true;
};

const handleClose = () => {
    keyword.value = "";
    dialogFormVisible.value = false;
};

defineExpose({
    dialogOpen,
});
</script>

<style lang="scss">
.el-form-item {
    margin-bottom: 10px;
}
</style>

<style lang="scss" scoped></style>
